/**
 * @file 支付看板
 * @author ruanairuo(ruanairuo@baijia.com)
 * @date 2020-01-19
 */
import React, {useState, useEffect} from 'react';
import {Space, Card, Input, Row, Col} from 'antd';

import {
    fetchDetail,
    downLoad,
    getWindControlValues
} from '~/service/windControl';
import {YESTERDAY} from '~/utils/date';
import commonAnchor from '~/page/FineBi/common/CommonAnchor';
import DetailModal from '../common/DetailModal';
import {convertChartListToMap} from '../utils/convert';
import CommonTitle from '../common/Title';
import {formatTooltip} from '../utils/formatTooltip';
import PartTypeOne from './components/partOne';
import PartTypeTwo from './components/partTwo';
import PartThree from './components/partThree';
import {PARTTYPE1, TITLE_PART, TITLE_META, anchorConfig} from './config';


import './index.styl';

const ShortPeriodClass = props => {

    const [detailData, setDetailData] = useState({});
    const [detailModalVisible, setDetailModalVisible] = useState(false);
    const [resultTitle, setResultTitle] = useState({});

    const {
        allUnitType: {
            textList = []
        } = {}
    } = resultTitle;

    const titleText = convertChartListToMap(textList);

    const {
        [TITLE_META.TITLE_TEXT_ONE]: titleText1,
        [TITLE_META.TITLE_TEXT_TWO]: titleText2
    } = titleText;

    const handleDetail = params => {
        setDetailModalVisible(true);
        fetchDetail(params)
            .then(res => {
                setDetailData(res.data || {});
            });
    };

    const handleDownload = params => {
        const excelName = params.unitName;
        downLoad({params, excelName});
    };

    // 获取全局数据
    const getData = () => {

        getWindControlValues({part: TITLE_PART})
            .then(res => {
                const {
                    data
                } = res;

                setResultTitle(data);
            });
    };

    useEffect(() => {
        getData();
    }, []);

    return (
        <div className="wind-control-conatiner">
            <CommonTitle
                title="流量风控"
                time={YESTERDAY}
                containerStyle={{justifyContent: 'space-between'}}
            />
            <div className="wind-control-content">
                <CommonTitle
                    type="subTitle"
                    title="一、投放板块"
                    subStyle={{fontSize: 18}}
                />
                <CommonTitle
                    type="subTitle"
                    title="I. 信息流低效素材"
                    containerStyle={{paddingTop: 0}}
                    subStyle={{fontSize: 16}}
                />
                <PartTypeOne
                    onDetail={handleDetail}
                    onDownLoad={handleDownload}
                    part={PARTTYPE1.ONE}
                    tooltip={(params => formatTooltip(params, true))}
                />
                <CommonTitle
                    type="subTitle"
                    title="II. 信息流低效页面及素材"
                    subStyle={{fontSize: 16}}
                />
                <PartTypeOne
                    onDetail={handleDetail}
                    onDownLoad={handleDownload}
                    part={PARTTYPE1.TWO}
                    tooltip={(params => formatTooltip(params, true))}
                />
                <CommonTitle
                    type="subTitle"
                    title="III. 信息流高成本素材"
                    subStyle={{fontSize: 16}}
                />
                <PartTypeOne
                    onDetail={handleDetail}
                    onDownLoad={handleDownload}
                    part={PARTTYPE1.THREE}
                    tooltip={(params => formatTooltip(params))}
                />
                <CommonTitle
                    type="subTitle"
                    title="二、转化板块"
                    subStyle={{fontSize: 18}}
                />
                <CommonTitle
                    type="subTitle"
                    title="I. 刷单渠道"
                    subStyle={{fontSize: 16}}
                    containerStyle={{paddingTop: 0}}
                />
                <PartTypeTwo onDetail={handleDetail} onDownLoad={handleDownload} part={PARTTYPE1.FOUR} />
                <CommonTitle
                    type="subTitle"
                    title="II. 流量质量"
                    subStyle={{fontSize: 16}}
                />
                <PartTypeTwo onDetail={handleDetail} onDownLoad={handleDownload} part={PARTTYPE1.FIVE} />
                <CommonTitle
                    type="subTitle"
                    title="三、正价课板块"
                    subStyle={{fontSize: 18}}
                />
                <CommonTitle
                    type="subTitle"
                    title="低转正退费率"
                    subStyle={{fontSize: 16}}
                    containerStyle={{paddingTop: 0}}
                />
                <PartThree onDetail={handleDetail} onDownLoad={handleDownload} part={PARTTYPE1.SIX} />
            </div>
            <DetailModal
                data={detailData}
                detailModalVisible={detailModalVisible}
                onCancel={() => setDetailModalVisible(false)}
            />
        </div>
    );
};

export default commonAnchor(ShortPeriodClass, anchorConfig);
